<template>
    <div style="width: 100%;height: 100%;">
        <div id="china-map" style="width: 100%;height: 100%;"></div>
    </div>
</template>
  
<script>
import * as echarts from 'echarts';
import JSON from '../../mapJson/anhui.json';
import law from '../../assets/law.svg'
// import JSON from '../../mapJson/china.json';
export default {
    data() {
        return {
            mapOption: {}
        }
    },
    mounted() {
        this.initMap()
        this.drawMap()
    },
    methods: {
        drawMap() {
            var svg = `<?xml version='1.0' encoding='UTF-8' standalone='no'?>
<svg height="209.973mm" baseProfile="tiny" xmlns:cc="http://creativecommons.org/ns#" viewBox="0 0 3507 2480" width="296.926mm" version="1.2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <path name="哈哈" style="fill: #082141; fill-opacity: 0.9; stroke: transparent;" d="M726.185,1048.18 L2493.04,328.351 L2591.2,1898.89 L1020.66,2226.08 L726.185,1048.18"/>
</svg>
`;
            echarts.registerMap("organ_diagram", { svg: svg });

            const option = {
                backgroundColor: "#040b1c",
                title: {
                    text: "地图系列的 SVG 底图-2",
                    left: "center",
                    bottom: 10,
                },
                tooltip: {
                    show: false,
                    trigger: "item",
                    backgroundColor: "rgba(166, 200, 76, 0.82)",
                    borderColor: "#FFFFCC",
                    showDelay: 0,
                    hideDelay: 0,
                    enterable: true,
                    transitionDuration: 0,
                    extraCssText: "z-index:100",
                    formatter: function (params, ticket, callback) {
                        console.log(params);
                        //根据业务自己拓展要显示的内容
                        var res = "";
                        var name = params.name;
                        var value = params.value[params.seriesIndex + 1] || params.value;
                        res = "<span style='color:#fff;'>" + name + "</span><br/>数据：" + value;
                        return res;
                    },
                },
                visualMap: {
                    //图例值控制
                    min: 1,
                    max: 10,
                    calculable: true,
                    show: false,
                    color: ["#f44336", "#00eaff"],
                    textStyle: {
                        color: "#fff",
                    },
                },
                geo: {
                    left: 10,
                    right: 10,
                    map: "organ_diagram",
                    itemStyle: {
                        borderWidth: 0,
                    },
                    emphasis: {
                        focus: "none",
                        itemStyle: {
                            areaColor: "#ffffff",
                        },
                        label: {
                            show: false,
                        },
                    },
                    regions: [
                        {
                            name: "map11",
                            itemStyle: {
                                areaColor: "red",
                                color: "red",
                            },
                        },
                    ],
                },
                series: [

                ],
            };

            const myChart = echarts.init(
                document.getElementById('china-map'),
            );
            myChart.setOption(option);
        },
        initMap() {
            this.mapOption = {
                color: ['#5470c6'],
                tooltip: {
                    trigger: 'item',
                    renderMode: 'html',
                    // 触发方式
                    triggerOn: 'click',
                    enterable: true,
                    backgroundColor: '#fff',
                    padding: 0,
                    textStyle: {
                        color: '#000',
                        fontSize: '12'
                    },
                    extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
                },
                dispatchAction: {
                    type: 'downplay'
                },
                roam: false,
                roamController: {
                    show: true,
                    x: 'right',
                    mapTypeControl: {
                        china: true
                    }
                },
                series: [],
                geo: {
                    left: 10,
                    right: 10,
                    map: 'anhui',
                    itemStyle: {
                        borderWidth: 0,
                    },
                    label: {
                        show: true,
                        color: '#fff'
                    },
                    emphasis: {
                        focus: 'none',
                        label: {
                            show: true,
                            color: '#fff'
                        },
                    }
                }
            }

        }
    }
}
</script>
  
<style></style>
  